<template>
  <div class="test-scroll">
    <TestNavBar class="navbar">
      <template #right>
        <div class="right-narbar">
          <img src="@/assets/logo.svg" alt="" />
        </div>
      </template>
    </TestNavBar>

    <!-- <div class="container">
      <div class="title">
        <span>很长很长的中文很长很长的中文很长很长的中文很长很长的中文</span>
      </div>
      <div class="sxdz">34</div>
      <div class="content">
        {{content}}
      </div>
      <div class="footer"></div>
    </div> -->
    <div class="box" >
        <img v-for="(image,index) in imageList" :key="index" class="image" :src="image" alt="" />
        <div class="testssss">112122</div> 
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import TestNavBar from "../views/home/test-narbar.vue";
let content = ref(
  "6月30日上午，在深中通道开通之际，省委书记黄坤明看望慰问项目业主及参建、运营单位代表，代表省委、省政府和全省人民，向广大建设者及为项目规划建设、科技攻关、监理保障等作出贡献的同志们致以崇高敬意，表示衷心感谢。他指出，深中通道建成开通，习近平总书记专门发来贺信，致以亲切慰问，提出殷切期望，充分体现了对粤港澳大湾区建设、对广东改革发展的关心关怀，我们要认真学习领会，下功夫把深中通道管好用好，充分发挥交通开路先锋作用，携手港澳强化基础设施“硬联通”和规则机制“软联通”，抓紧做实“一点两地”全新定位，加快建设世界级的湾区、发展最好的湾区。省委副书记、深圳市委书记孟凡利参加活动。黄坤明说，习近平总书记在贺信中充分肯定深中通道全体参与者用辛勤付出、坚强毅力，高质量完成了工程任务，深刻指出中国式现代化是干出来的，伟大事业都成于实干，并对管好用好深中通道、更好服务保障粤港澳大湾区建设等提出明确要求，饱含深情、充满期待，让我们备受鼓舞、倍感振奋。全省上下要牢记嘱托、感恩奋进，守正创新、苦干实干，坚持以高质量发展为牵引，扎实推进中国式现代化的广东实践，紧密携手港澳推进粤港澳大湾区建设向纵深发展，再创让世界刮目相看的新奇迹。充分发挥交通开路先锋作用，携手港澳强化基础设施“硬联通”和规则机制“软联通”，抓紧做实“一点两地”全新定位，加快建设世界级的湾区、发展最好的湾区。省委副书记、深圳市委书记孟凡利参加活动。黄坤明说，习近平总书记在贺信中充分肯定深中通道全体参与者用辛勤付出、坚强毅力，高质量完成了工程任务，深刻指出中国式现代化是干出来的，伟大事业都成于实干，并对管好用好深中通道、更好服务保障粤港澳大湾区建设等提出明确要求，饱含深情、充满期待，让我们备受鼓舞、倍感振奋。全省上下要牢记嘱托、感恩奋进，守正创新、苦干实干，坚持以高质量发展为牵引，扎实推进中国式现代化的广东实践，紧密携手港澳推进粤港澳大湾区建设向纵深发展，再创让世界刮目相看的新奇迹。"
);

const imageList = reactive([
  "https://picsum.photos/200/300?grayscale",
  "https://picsum.photos/200/300/?blur",
  "https://picsum.photos/id/870/200/300?grayscale&blur=2",
  "https://picsum.photos/200/300.jpg",
]);
</script>

<style lang="less" scoped>
.box {  
  display: grid;  
  grid-gap: 10px; /* 网格间隔 */  
  width: 100%; /* 或你想要的宽度 */  
  height: 300px; /* 或你想要的固定高度 */  
  overflow: hidden; /* 如果图片需要裁剪 */  
}  
  
/* 单张图片铺满 */  
.box > img:only-child {  
  grid-column: 1 / -1; /* 跨越所有列 */  
  grid-row: 1 / -1; /* 跨越所有行 */  
  width: 100%;  
  height: 100%;  
  object-fit: cover; /* 保持图片比例填充 */  
}  
  
/* 两张图片 */  
.box:has(> img:nth-last-child(2)) {  
  grid-template-columns: 1fr 1fr; /* 两列 */  
  grid-template-rows: 1fr; /* 一行 */  
}  
  
.box:has(> img:nth-last-child(2)) > img {  
  height: 100%;  
  object-fit: cover;  
}  
  
/* 三张图片 */  
.box:has(> img:nth-last-child(3)) {  
  grid-template-columns: 1fr 2fr; /* 左侧一列，右侧两列（但用于垂直分割） */  
  grid-template-rows: 1fr 1fr; /* 两行 */  
}  
  
.box:has(> img:nth-last-child(3)) > img:first-child {  
  grid-column: 1 / 2;  
  grid-row: 1 / 3; /* 跨越两行 */  
  height: 100%;  
  object-fit: cover;  
}  
  
.box:has(> img:nth-last-child(3)) > img:nth-child(2),  
.box:has(> img:nth-last-child(3)) > img:nth-child(3) {  
  grid-column: 2 / 3;  
  height: 50%;  
  object-fit: cover;  
}  
  
/* 四张图片 */  
.box:has(> img:nth-last-child(4)) {  
  grid-template-columns: repeat(2, 1fr); /* 两列 */  
  grid-template-rows: repeat(2, 1fr); /* 两行 */  
}  
  
.box:has(> img:nth-last-child(4)) > img {  
  height: 100%; /* 在本例中其实可以省略，因为已经设置了行高 */  
  object-fit: cover;  
}
.test-scroll {
  height: 100vh;
  position: relative;
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: orange;
  }
  .right-narbar {
    width: 58px;
    height: 50px;

    margin: auto;
    img {
      width: 100%;
    }
  }
  .container {
    font-size: 28px;
    padding: 0 40px;
    .title {
      font-size: 48px;
      font-weight: 700;
      height: 150px;
      overflow: hidden;
    }
    .sxdz {
      height: 70px;
      background-color: red;
    }
    .content {
      height: calc(100vh -70px-150px);
      // top: 0;
      // bottom: 0;
      overflow: auto;
    }
    .footer {
      height: 150px;
      background-color: #ccc;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: 30px;
      margin-top: 70px;
    }
  }
}
</style>